<template>
  <div class="update-log-page">
    <n-card title="更新日志" class="update-log-card">
      <!-- 时间轴展示所有更新日志 -->
      <n-timeline>
        <n-timeline-item
          v-for="(log, idx) in logs"
          :key="idx"
          :title="log.version + '（' + log.date + '）'"
          :content="log.content"
        >
          <!-- 支持多条内容时，渲染为列表 -->
          <ul v-if="Array.isArray(log.content)">
            <li v-for="(item, i) in log.content" :key="i">{{ item }}</li>
          </ul>
          <span v-else>{{ log.content }}</span>
        </n-timeline-item>
      </n-timeline>
    </n-card>
  </div>
</template>

<script setup lang="ts">
// 引入 Naive UI 组件
import { ref } from 'vue'
import { NCard, NTimeline, NTimelineItem } from 'naive-ui'
// 静态导入本地 JSON 文件
import logsData from './update-log.json'

// 日志数据，类型推断
const logs = ref(logsData)
</script>

<style scoped>
.update-log-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 16px;
}
.update-log-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
</style> 